/*----------------------------------------------------
JavaScript Slider Menu
Author, Rounak Saha (Ron)
Copyright (c) 2015, Rounak Saha

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
------------------------------------------------------*/

var Slider = {
	// keep track of current animation
	_currentId: 0,
	// delay
	_delay: 1000,
	// time step
	_timestep: 10,
	// radius
	_r: 87.5,
	// tilewidth
	_tileW: 0,
	// slider width
	_sliderW: 0,
	_sliderX: 0,
	// z coefficient
	_zCoeff: 1000,
	// min theta angle
	_minTheta: 90,
	// token
	_token: "",
	// height of middle tile
	_midTileH: 30,
	// ry
	_rY: 0,
	// starting angle
	_startPhi: 0,
	
	// calculate z
	z: function(theta) {
		return Math.floor(Slider._r * Slider._zCoeff * Math.sin(Math.PI/180 *theta));
	},
	// calculate x
	x: function(theta) {
		if(theta<90)
			return Slider._sliderX +(Slider._sliderW/2 -(Slider._r*Math.cos(Math.PI/180 *theta) + Slider._tileW/2));
		else 
			return Slider._sliderX + Slider._sliderW/2 + Math.abs(Slider._r*Math.cos(Math.PI/180 *theta)) - Slider._tileW/2;
	},
	// calculate Y
	y: function(phi) {
		//return (Slider._rY*Math.sin(Math.PI/180 *phi) - (Slider._rY-Slider._midTileH));
		return Slider._rY*(Math.sin(phi*Math.PI/180) - Math.sin(Slider._startPhi*Math.PI/180));
	},
	opacity: function(theta) {
		var mop = 0.2;
		var calo = Math.sin(Math.PI/180 *theta);
		if(calo <mop)	return mop;
		else 			return calo;
	},
	// calculate ry
	ry_phi: function() {
		// calculate RY
		var wr = Slider._r + Slider._tileW/2;
		Slider._rY = (wr*wr + Slider._midTileH*Slider._midTileH)/(2*Slider._midTileH);
		// calculate phi
		Slider._startPhi = 180* Math.atan((Slider._rY-Slider._midTileH)/wr)/Math.PI;
	},
	// calculate Angle
	calcTheta: function(thetaT, theta1, t) {
		if(theta1 <= 180 && theta1>=0) // limit to 180 deg
			return (theta1 + (thetaT-theta1)*Math.sin(Math.PI/180*(90*t/Slider._delay)));	
		else if(theta1 > 180)
			return 180;
		else if(theta1 < 0)
			return 0;
	},
	// calculate Phi
	calcPhi: function(phiT, phi1, t) {
		var endPhi = 180 - Slider._startPhi;
		if(phi1 < endPhi && phi1>Slider._startPhi) // limit to 180 deg
			return (phi1 + (phiT-phi1)*Math.sin(Math.PI/180*(90*t/Slider._delay)));	
		else if(phi1 > endPhi)
			return endPhi;
		else if(phi1 < Slider._startPhi)
			return Slider._startPhi;
	},
	// animation function
	_runtime: 0,
	_selected: 0,
	animateSlide: function() {
		Slider._runtime += Slider._timestep;
		var chls = $(Slider._token).children();
		// exit code
		if(parseInt(chls[Slider._selected].getAttribute("theta"))==90 || Slider._runtime==Slider._delay) {
			clearInterval(Slider._currentId);
			Slider._runtime = 0;
			return;
		}
		// animation
		for(var i=0; i<chls.length; i++) {
			// this is left side (theta<=90)
			if(i<=Slider._selected) {
				if(!(Slider._selected==0 && i==0)) {
					var tslice = 90/(Slider._selected==0?1:Slider._selected);
					var pslice = 90/(Slider._selected==0?1:Slider._selected);
					var th1 = parseFloat(chls[i].getAttribute("theta"));
					var ph1 = parseFloat(chls[i].getAttribute("phi"));
					var th2 = Slider.calcTheta(i*tslice, th1, Slider._runtime);
					var ph2 = Slider.calcPhi(i*pslice, ph1, Slider._runtime);
					Slider.positionSlide(chls[i], th2, ph2);
					chls[i].setAttribute("theta", th2);
					chls[i].setAttribute("phi", ph2);
				}
			}
			// this is right side (theta>90)
			else if(i>Slider._selected) {
				var tslice = 90/(chls.length - Slider._selected - 1);
				var pslice = 90/(chls.length - Slider._selected - 1);
				var th1 = parseFloat(chls[i].getAttribute("theta"));
				var ph1 = parseFloat(chls[i].getAttribute("phi"));
				var th2 = Slider.calcTheta(90+(i-Slider._selected)*tslice, th1, Slider._runtime);
				var ph2 = Slider.calcPhi(90+(i-Slider._selected)*pslice, ph1, Slider._runtime);
				Slider.positionSlide(chls[i], th2, ph2);
				chls[i].setAttribute("theta", th2);
				chls[i].setAttribute("phi", ph2);
			}
			// special case for i=0 selected=0
			if(Slider._selected==0 && i==0) {
				var tslice = 90;
				var pslice = 90;
				var th1 = parseFloat(chls[i].getAttribute("theta"));
				var ph1 = parseFloat(chls[i].getAttribute("phi"));
				var th2 = Slider.calcTheta(tslice, th1, Slider._runtime);
				var ph2 = Slider.calcPhi(pslice, ph1, Slider._runtime);
				Slider.positionSlide(chls[i], th2, ph2);
				chls[i].setAttribute("theta", th2);
				chls[i].setAttribute("phi", ph2);
			}
		}
	},
	// animate to selected
	setSelected: function(index) {
		//alert("ok");
		Slider._selected = index;
		clearInterval(Slider._currentId);
		Slider._runtime = 0;
		Slider._currentId = setInterval(Slider.animateSlide, Slider._timestep);		
	},
	// position a single slider
	positionSlide: function(ele, theta, phi) {
		ele.style.opacity = Slider.opacity(theta);
		$(ele).css({
			'filter': 'alpha(opacity='+ parseInt(Slider.opacity(theta)*100) +')',
			'-ms-filter': 'alpha(opacity='+ parseInt(Slider.opacity(theta)*100) +')'
		});
		ele.style.left = Slider.x(theta) +"px";
		//ele.style.top = Slider.y(phi) +"px";
		ele.style.zIndex = Slider.z(theta);
		ele.setAttribute("theta", theta);
		ele.setAttribute("phi", phi);
	},
	//position all elements accordingly
	positionAll: function() {
		var chls = $(Slider._token).children();
		Slider._minTheta = 180/(chls.length-1);
		var phiSlice = (180-2*Slider._startPhi)/(chls.length-1);
		for(var i=0; i<chls.length; i++) {
			//chls[i].style.opacity = Slider.opacity(Slider._minTheta*i);
			//chls[i].style.left = Slider.x(Slider._minTheta*i) +"px";
			//chls[i].style.top = Slider.y(Slider._startPhi + phiSlice*i) +"px";
			//chls[i].style.zIndex = Slider.z(Slider._minTheta*i);
			//chls[i].setAttribute("theta", Slider._minTheta*i);
			Slider.positionSlide(chls[i], (Slider._minTheta*i), (Slider._startPhi + phiSlice*i));
			chls[i].setAttribute("clkid", i);
		}
	},
	// attachEvent to slides
	attachClickToSlides: function() {
		var chls = $(Slider._token).children();
		for(var i=0; i<chls.length; i++) {
			$(chls[i]).click(function() {
				var id = this.getAttribute("clkid");
				Slider.setSelected(id);
				console.log(id);
				// this is needed for cancelling event propagation
				return false;
			});
		}
	},
	// initialize
	init: function(token) {
		Slider._token = token;
		Slider._sliderW = $(token).outerWidth(true);
		Slider._sliderX = $(token).offset().left;
		Slider._tileW = $($(token+" .tile")[0]).outerWidth(true);
		Slider.ry_phi();
		Slider.positionAll();
		Slider.attachClickToSlides();
	},
	// set properties
	set: function(params) {
		for(var i in params) {
			if(i=="r") Slider._r = params[i];
			else if(i=="delay") Slider._delay = params[i];
			else if(i=="midH") Slider._midTileH = params[i];
		}
		return this;
	}
};